<style>
.subnav_process>li {position: relative;display: inline-block;}
.subnav_process {padding-top: 14px;text-align: center;}
ul, li {margin: 0;padding: 0;border: 0;font-size: 100;font: inherit;vertical-align: baseline;background-repeat: no-repeat;}
.subnav_process>li>div {text-align: center;position: relative;float: left;min-width: 56px;height: 34px;line-height: 30px;vertical-align: middle;}
.subnav_process>li>div>i {width: 28px;height: 28px;font-size: 14px;line-height: 28px;color: #fff;border-radius: 50%;display: block;background: #dadada;font-style: normal;margin: auto;}
.subnav_process>li>div>p {position: relative;top: 12px;font-size: 14px;font-weight: 700;line-height: 20px;margin-top: -8px;color: #a5a5a5;}
.subnav_process .passed i {background-color: #40bf90;}
.subnav_process>li>i {float: left;width: 150px;height: 2px;margin-top: 14px;vertical-align: middle;background-color: #ededed;}
.section_main{min-height: 300px;background: #fff;margin-top: 40px;margin-left:-20px;margin-right:-20px;padding:10px;padding-top:30px;}
.section_main >.row{ margin-bottom:15px;}
.control-label{ padding-top:4px; font-weight:normal;}
</style>
<ul class="subnav_process">
    <li class="passed">
        <div>
            <i>1</i>
            <p>身份验证</p>
        </div>
        <i></i>
    </li>
    <li class="passed">
        <div>
            <i>2</i>
            <p>设置新密码</p>
        </div>
        <i></i>
    </li>
    <li>
        <div>
            <i>3</i>
            <p>完成</p>
        </div>
    </li>
</ul>
<form class="section_main" action="{:U('modifyPwd')}" method="post">
	<div class="row">
        <label class="col-sm-4 control-label text-right">当前登录密码:</label>
        <div class="col-sm-4"><input class="form-control" type="password" name="oldPwd" placeholder="请输入当前登录密码" plugin="passwordStrength"  datatype="*6-18" errormsg="密码至少6个字符,最多18个字符！" /></div>
        <div class="col-sm-4"><div class="passwordStrength"></div></div>
    </div>
	<div class="row">
        <label class="col-sm-4 control-label text-right">新的登录密码:</label>
        <div class="col-sm-4"><input class="form-control inputxt" type="password" placeholder="请输入新的登录密码" name="password" id="password" datatype="*"  nullmsg="密码不能为空且至少6个字符" errormsg="不支持特殊字符" /></div>
    </div>
	<div class="row">
        <label class="col-sm-4 control-label text-right">确认新的登录密码:</label>
        <div class="col-sm-4"><input class="form-control inputxt" id="confirm_password" placeholder="确认登录密码" name="confirm_password" type="password" recheck="password"  datatype="*6-18" errormsg="两次输入的密码不一致！" ></div>
        <div class="col-sm-4"><div class="Validform_checktip"></div></div>
    </div>
    <div class="row">
    	<label class="col-sm-4"></label>
        <div class="col-sm-4"><input class="btn btn-success btn-block" type="submit" value="提交"/></div>
    </div>
    <div style="height: 200px;width: 150px;margin: auto;margin-top:10px" class="text-center hidden">
    	<i class="fa fa-check-circle " style="font-size: 110px;color: #40bf90;"></i>
		<div>重置密码成功</div>
	</div>
</form>
<script>
$(".section_main").Validform({
	tiptype:function(msg,o,cssctl){
		if(!o.obj.is("form")){
			var objtip=o.obj.siblings(".Validform_checktip");
			cssctl(objtip,o.type);
			objtip.text(msg);
		}else{
			var objtip=o.obj.find("#msgdemo");
			cssctl(objtip,o.type);
			objtip.text(msg);
		}
	},
	ajaxPost:true,
	callback:function(data){
		if(data.status&&data.status==1){
			$(".subnav_process li").addClass("passed");
			$(".section_main > .row").remove();
			$(".section_main > .hidden").removeClass("hidden");
		}else{
			$.ThinkBox.error('错误，'+data.info+' 请重试！',{'delayClose':2000,modal:false, 'close': '关闭',x:0,y:0,center:false,locate:['left','top'], show:['',0]});
		}
	}
});
$(".trfooter").hide();
</script>